<div class="wrapper">
    <app-breadcrumb [path]="path"></app-breadcrumb>
    <app-scrollview class="scrollview">
        <h2><span *ngIf="!loading && nodeJobRuns && nodeJobRuns.length > 0">({{nodeJobRuns.length}}
                jobs)</span></h2>
        <div *ngIf="!loading && nodeJobRuns;then showQueue;else loadQueue"></div>
        <ng-template #showQueue>
            <nz-row>
                <nz-col [nzSpan]="24">
                    <nz-select nzShowSearch nzMode="multiple" [(ngModel)]="status" (ngModelChange)="statusFilterChange()">
                        <nz-option *ngFor="let opt of statusOptions" [nzValue]="opt" [nzLabel]="opt"></nz-option>
                    </nz-select>
                </nz-col>
            </nz-row>
            <nz-row>
                <nz-col [nzSpan]="24">
                    <nz-table [nzData]="nodeJobRuns" nzPageSize="100" #jobrunTab>
                        <thead>
                        <tr>
                            <th nzWidth="20px">since</th>
                            <th nzWidth="20px">status</th>
                            <th nzWidth="20px">by</th>
                            <th nzWidth="10px">run</th>
                            <th nzWidth="20px">project/workflow</th>
                            <th [nzWidth]="currentAuthSummary.isAdmin()?'10px':'40px'"
                                    [ngClass]="{'four wide': !currentAuthSummary.isAdmin(), 'one wide': currentAuthSummary.isAdmin()}">
                                node</th>
                            <th nzWidth="20px">triggered_by</th>
                            <th nzWidth="30px" *ngIf="currentAuthSummary.isAdmin()">requirements</th>
                            <th nzWidth="20px"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let wNodeJobRun of jobrunTab.data; let index = index">
                            <td>
                                {{wNodeJobRun.queued | amTimeAgo}}
                            </td>
                            <td>
                                {{wNodeJobRun.status}}
                            </td>
                            <td>
                                {{bookedOrBuildingByList[index]}}
                            </td>
                            <td>
                                <a [routerLink]="['/project', parametersMaps[index]['cds.project'], 'workflow', parametersMaps[index]['cds.workflow'], 'run', parametersMaps[index]['cds.run.number']]"
                                   *ngIf="parametersMaps[index] != null">
                                    {{parametersMaps[index]['cds.run.number']}}
                                </a>
                            </td>
                            <td>
                                <a [routerLink]="['/project', parametersMaps[index]['cds.project'], 'workflow', parametersMaps[index]['cds.workflow']]"
                                   *ngIf="parametersMaps[index] != null">
                                    {{parametersMaps[index]['cds.project']}}/{{parametersMaps[index]['cds.workflow']}}
                                </a>
                            </td>
                            <td>
                                <a [href]="parametersMaps[index]['cds.ui.pipeline.run']">
                                    {{parametersMaps[index]['cds.node']}}
                                </a>
                            </td>
                            <td>
                                <span *ngIf="parametersMaps[index] != null">
                                    {{parametersMaps[index]['cds.triggered_by'] ||
                                parametersMaps[index]['cds.triggered_by.username']}}
                                </span>
                            </td>
                            <td *ngIf="currentAuthSummary.isAdmin()">
                                <span
                                        *ngIf="wNodeJobRun.job != null && wNodeJobRun.job.action != null && wNodeJobRun.job.action.requirements != null">
                                    {{requirementsList[index]}}
                                </span>
                            </td>
                            <td class="alignRight">
                                <button nz-button nzDanger nzType="primary" [nzLoading]="wNodeJobRun.updating"
                                        [disabled]="wNodeJobRun.updating" (click)="stopNode(index)">
                                    <i nz-icon nzType="stop" nzTheme="outline"></i>Stop
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </nz-col>
            </nz-row>
        </ng-template>
        <ng-template #loadQueue>
            <nz-spin nzTip="Loading..."></nz-spin>
        </ng-template>
    </app-scrollview>
</div>
